<div class="password-component">
  <div class="title">
    <div>修改密码</div>
  </div>
  <div class="psdChange">
    <form class="form" dForm ngForm [dValidateRules]="formRules.rule" [layout]="layoutDirection"
      (dSubmit)="submitForm($event)">
      <d-form-item class="password">
        <d-form-label [required]="true">原密码</d-form-label>
        <d-form-control [suffixTemplate]="suffixTemplate1">
          <input dTextInput [type]="showOldPassword ? 'text' : 'password'" name="oldPassword" [(ngModel)]="oldPassword"
            placeholder="请输入密码（8-32个数字字母特殊字符组合）" [dValidateRules]="formRules.passwordRules"
            [ngModelOptions]="{ updateOn: 'blur' }" />
        </d-form-control>
        <ng-template #suffixTemplate1>
          <i [class]="showOldPassword ? 'icon icon-preview' : 'icon icon-preview-forbidden'"
            (click)="showOldPassword = !showOldPassword"></i>
        </ng-template>
      </d-form-item>
      <d-form-item class="password">
        <d-form-label [required]="true">新密码</d-form-label>
        <d-form-control [suffixTemplate]="suffixTemplate2">
          <input dTextInput [type]="showNewPassword ? 'text' : 'password'" name="newPassword" [(ngModel)]="newPassword"
            placeholder="请输入密码（8-32个数字字母特殊字符组合）" [dValidateRules]="formRules.newPasswordRules"
            [ngModelOptions]="{ updateOn: 'blur' }" />
        </d-form-control>
        <ng-template #suffixTemplate2>
          <i [class]="showNewPassword ? 'icon icon-preview' : 'icon icon-preview-forbidden'"
            (click)="showNewPassword = !showNewPassword"></i>
        </ng-template>
      </d-form-item>
      <d-form-item class="password">
        <d-form-label [required]="true">确认新密码</d-form-label>
        <d-form-control [suffixTemplate]="suffixTemplate3">
          <input dTextInput [type]="showConfirmPassword ? 'text' : 'password'" name="confirmPassword"
            [(ngModel)]="confirmPassword" placeholder="请输入密码（8-32个数字字母特殊字符组合）"
            [dValidateRules]="formRules.confirmPasswordRules" [ngModelOptions]="{ updateOn: 'blur' }" />
        </d-form-control>
        <ng-template #suffixTemplate3>
          <i [class]="showConfirmPassword ? 'icon icon-preview' : 'icon icon-preview-forbidden'"
            (click)="showConfirmPassword = !showConfirmPassword"></i>
        </ng-template>
      </d-form-item>
      <d-form-operation>
        <button class="submit" dFormSubmit>修改</button>
      </d-form-operation>
    </form>
  </div>
</div>
